@import "~common/less/var";

.list {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 5px 0;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: @spacer / 4 @spacer / 2 ;
  @hoverColor: #f8f8f8;
  @selectedColor: #f4f4f4;

  &[disabled] {
    color: #ccc;
    cursor: not-allowed;
    &:hover {
      background-color: transparent;
    }
    &.selected {
      &:hover {
        background-color: @hoverColor;
      }
    }
  }
  &.selected {
    background-color: @selectedColor;
    color: @primary-color;
  }
  &:hover {
    background-color: @hoverColor;
  }

  .icon {
    border:1px solid #d8d8d8;
    width:22px;
    height:22px;
    margin-right: @spacer / 2;
  }
  .label {
    flex: 1;
    white-space:nowrap;
  }
}
